<template>
  <div>
    <el-dialog title="" :visible.sync="dialogshow" width="30%" :before-close="handleClose" append-to-body>
      <el-tabs v-model="activeName" @tab-click="handleClick">

        <el-tab-pane label="关键词搜索" name="first">
          <div class="flexdiv">
            <el-input /> <el-button type="primary">搜索</el-button>
          </div>
          <div class="searchpad">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="node_center">
                  <div class="node_title">作业节点</div>
                  <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
                  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="node_center">
                  <div class="node_title">工种</div>
                  <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
                  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="node_center">
                  <div class="node_title">标签</div>
                  <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
                  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="node_center">
                  <div class="node_title">作业指导书</div>
                  <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
                  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="节点搜索" name="second">
          <el-input
            v-model="filterText"
            placeholder="输入关键字进行过滤"
          />

          <el-tree
            ref="tree"
            class="filter-tree"
            :data="data"
            :props="defaultProps"
            default-expand-all
            show-checkbox
            check-strictly
            :filter-node-method="filterNode"
          />
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳']
export default {
  props: {
    dialogshow: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      activeName: 'first',
      loading: false,
      checkAll: false,
      checkedCities: ['上海', '北京'],
      cities: cityOptions,
      isIndeterminate: true,
      filterText: '',
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : []
      this.isIndeterminate = false
    },
    handleClick() {

    },
    handleClose(done) {
      this.$emit('close')
      this.loading = false
    }
  }
}
</script>
<style lang="scss" scoped>
    .el-tabs__nav.is-top{
        width: 100%;
    }
    .el-tabs{
        width: 100%;
    }
    .flexdiv{
        display: flex;
        justify-content: space-between;
    }
    .searchpad{
      padding: 20px;
    }

    .node_center{
       .node_title{
         text-align: left;
         line-height: 42px;
         font-weight: 500px;
         font-size: 16px;
      }
    }
</style>

